import React, { Component } from 'react'

export default class CommentInput extends Component {

    state = {
        username: '',
        content: ''
    }
    handleUsernameChange = (event) => {
        this.setState({
            username: event.target.value
        })
    }

    handleContentChange=(event)=>{
        this.setState({
            content:event.target.value
        })
    }

    handleSubmit=()=>{
        if (this.props.onSubmit) {
            const { username, content } = this.state
            this.props.onSubmit({username, content})
          }
          this.setState({ content: '' })
    }

    //组件挂载前
    componentDidMount () {
        this.textarea.focus()
        console.log(this.refs.inputRef);
      }
    render() {
        const { username, content } = this.state
        return (
            <div className='comment-input'>
                <div className='comment-field'>
                    <span className='comment-field-name'>用户名：</span>
                    <div className='comment-field-input'>
                        <input 
                        
                        ref="inputRef"
                        value={username} onChange={this.handleUsernameChange} />
                    </div>
                </div>
                <div className='comment-field'>
                    <span className='comment-field-name'>评论内容：</span>
                    <div className='comment-field-input'>
                        <textarea 
                         ref={(textarea) => this.textarea = textarea}
                        value={content}  onChange={this.handleContentChange}/>
                    </div>
                </div>
                <div className='comment-field-button'>
                    <button onClick={this.handleSubmit}>
                        发布
          </button>
         
                </div>
            </div>
        )
    }
}
